<script setup lang="ts">
  import 'swiper/css'
  import 'swiper/css/free-mode'

  import { type service } from '#/request'
  import { Swiper, SwiperSlide } from 'swiper/vue'
  import { onMounted, type PropType } from 'vue'
  const props = defineProps({
    content: {
      type: Array as PropType<service[]>,
      default: () => [],
    },
  })
  onMounted(() => {})
</script>

<template>
  <div class="w-full h-auto rounded-sm">
    <swiper
      :slidesPerView="'auto'"
      :spaceBetween="10"
      :freeMode="true"
      class="w-full"
    >
      <swiper-slide
        class="flex justify-start items-center w-auto"
        v-for="(slide, index) in props.content"
        :key="index"
      >
        <div
          class="w-20 h-auto bg-white rounded-lg flex flex-col justify-center items-center overflow-hidden"
        >
          <img class="w-[60%]" :src="slide.icon" />
          <span class="my-2 text-sm">{{ slide.name }}</span>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<style scoped></style>
